<template>
    <div class="box animated fadeInUp">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
                    :immediate-check="false"
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <div class="news-list">
                    <van-cell v-for="(item,index) in newsList" :key="index">
                        <div class="content">
                            <div class="top">
                                <div class="source">
                                    {{item.articleSource}}
                                </div>
                                <router-link tag="div" class=more
                                             :to="{name:'details',params:{articleId:item.articleId}}">
                                    更多
                                    <van-icon name="arrow" />
                                </router-link>
                            </div>
                            <div class="middle">
                                <div class="title">
                                    {{item.title}}
                                </div>
                                <div class="pic">
                                    <img :src="item.coverImgUrl" alt="">
                                </div>
                            </div>
                            <div class="bottom-title">{{item.createTime}}</div>
                        </div>
                    </van-cell>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import {getNews} from "../api/CMS-api";

    export default {
        created() {
            getNews(1, this.pageSize, this.categoryId).then(res => {
                this.newsList = res.rows;
                this.isLoading = false;
            });
        },
        data() {
            return {
                isLoading: false,
                loading: false,
                finished: false,
                pageNum: 1,
                pageSize: 12,
                newsList: []
            }
        },
        methods: {
            onRefresh() {
                getNews(1, this.pageSize, this.categoryId).then(res => {
                    this.newsList = res.rows;
                    this.isLoading = false;
                });
                this.pageNum = 1;
            },
            onLoad() {
                this.pageNum += 1;
                getNews(this.pageNum, this.pageSize, this.categoryId).then(res => {
                    if (res.rows != null) {
                        this.newsList = this.newsList.concat(res.rows);
                    } else {
                        this.finished = true;
                    }
                    this.loading = false;
                });
            },
        },
        props: {
            categoryId: {
                type: [String, Number]
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../styles/newsList.less";
</style>
